<%--
    @author Duminda Dharmakeerthi
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    var childIndex = 0;

    $(function () {
        if (document.getElementById('childrenTable').rows.length < 1) {
            $('#childrenLabel').hide();
        } else {
            $('#childrenLabel').show();
        }
    });

    function addChildRow(tableID) {     /*
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var count = parseInt(rowCount) / 2;
            var row1 = table.insertRow(rowCount);
            var row2 = table.insertRow(rowCount + 1);

            var str1 = "<td>" + $('#child-name').val() + "<span class='mandatory-field'></span></td><td colspan='3'>" +
                    '<%--<s:textarea style="width:400px;" rows="1" id="name' + childIndex + '" name="children[' + count + '].fullName"/>--%>' + "</td><td rowspan='2'>" + "<input type='button' onclick='deleteChild(" + childIndex + ")' value='" + $("#delete").val() + "'/>" + "</td>"
            var str2 = "<td>" + $('#is-disable').val() + "</td><td>"
                    + '<input type="radio" name="children[' + count + '].disable" value="false">' + $('#noId').val() + '</input>'
                    + '<input type="radio" name="children[' + count + '].disable" value="true">' + $('#yesId').val() + '</input>'
                    + "</td><td>" + $('#child-dob').val() + '<%--<s:label value="%{getText('date_format.label')}" cssClass="date-format"/>--%>' +
                    "</td><td>" +
                    '<%--<s:textfield  cssClass="childDOB" style="width:150px;" id="dateOfBirth' + childIndex + '" name="children[' + count + '].dateOfBirth" onKeyPress="return dateNumbersOnly(event,true)"/>--%>' +
                    "</td>";
            row1.innerHTML = str1;
            row2.innerHTML = str2;
            row1.setAttribute('id', 'row1' + childIndex);
            row2.setAttribute('id', 'row2' + childIndex);
            setDatePicker();
            validateChildDate('dateOfBirth' + childIndex);
            childIndex++;
            */

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var count = parseInt(rowCount) / 2;
            var row1 = table.insertRow(rowCount);
            var row2 = table.insertRow(rowCount + 1);
            var row3 = table.insertRow(rowCount + 2);

            var male = document.getElementById("male-label").value;
            var female = document.getElementById("female-label").value;
            // var unknown = document.getElementById("unknown-label").value;
            //alert("add clild row" + childIndex);
            var str1 = '<td>' + $('#child-name').val() + '<span class="mandatory-field"></span></td><td colspan="3">'
                    + '<input type="text" style="width:400px" id="name' + childIndex + '" name="children[' + childIndex + '].fullName"/>'
                    + '<input type="button" onclick="deleteChild(' + childIndex + ')" value="' + $("#delete").val() + '"/></td>';
            var str2 = '<td>' + $('#is-disable').val() + '</td><td colspan="3">'
                    + '<input type="radio" name="children[' + childIndex + '].disable" value="false">' + $('#noId').val() + '</input>'
                    + '<input type="radio" name="children[' + childIndex + '].disable" value="true">' + $('#yesId').val() + '</input>'
                    + '</td>';
            var str3 = '<td>' + $('#gender-label').val() + '</td><td>'
                    + '<select style="width: 120px" name="children[' + childIndex + '].gender">'
                    + '<option value="1">' + female + '</option>'
                    + '<option value="0">' + male + '</option>'
                    + '</select>'
                    + "</td><td>" + $('#child-dob').val()
                    + '<s:label value="%{getText('date_format.label')}" cssClass="date-format"/>'
                    + "</td><td>"
                    + '<s:textfield  cssClass="childDOB" style="width:150px;" id="dateOfBirth' + childIndex + '" name="children[' + childIndex + '].dateOfBirth" onKeyPress="return dateNumbersOnly(event,true)"/>'
                    + "</td>";
            row1.innerHTML = str1;
            row2.innerHTML = str2;
            row3.innerHTML = str3;
            row1.setAttribute('id', 'row1' + childIndex);
            row2.setAttribute('id', 'row2' + childIndex);
            row3.setAttribute('id', 'row3' + childIndex);
            setDatePicker();

            addChildrenValidationRule(childIndex);

            childIndex++;
        }


    function validateChildDate(id) {
        $('#' + id).rules("add", {
            isDateFormated: true});
    }

    $(function() {
        if ($('#landMode').val() == 'DETAIL') {
            childIndex = document.getElementById('childrenTable').rows.length;
            var count = 0;
            for (; count < childIndex; count++) {
                validateChildDate('dateOfBirth' + count);
            }
        }
    });

    function setDatePicker() {
        var dO = new Date();
        var d = dO.getDate();
        var m = dO.getMonth();
        var y = dO.getFullYear();
        var today = y + "-" + m + "-" + d;
        var id;
        $('.childDOB').DatePicker({
            format:'Y-m-d',
            date:dO,
            current:dO,
            position:'right',
            onBeforeShow:function () {
                id = "#" + this.id;
                $('.childDOB').DatePickerSetDate(dO, true);
            },
            onChange:function (formated, dates) {

                $(id).val(formated);

            }
        });
    }

    function deleteChild(index) {
        var table = document.getElementById('childrenTable');
        table.deleteRow($('#row1' + index).index());
        table.deleteRow($('#row2' + index).index());
        table.deleteRow($('#row3' + index).index());
        //TODO: no need to reduce the index
        //childIndex--;
    }

    function addChildrenValidationRule(id) {

        $('#name' + id).rules("add", {
            childName: true,
            messages:{
                childName: "<br/>" + $('#enterChildName').val()
            }
        });

        $('#dateOfBirth' + id).rules("add", {
            isDateFormated: true,
            isFeatureDate:true}

                );

    }

</script>
<tr>
    <td>
        <s:label id="childrenLabel" value="%{getText('children.label')}"/>
        <%-- <s:textfield id="childError" cssStyle="display:none"/> --%>
    </td>
    <td colspan="3">
        <table id="childrenTable">
            <s:if test="(editMode == 2 || editMode == 3 || editMode == 4 || editMode == 5 || editMode == 6 || editMode == 8 || editMode == 9)">
                <s:iterator status="status" value="children">
                    <tr>
                        <td><s:label value="%{getText('name.label')}"/><span class="mandatory-field"></span></td>
                        <td colspan="3">
                            <s:textfield value="%{fullName}" cssClass="width-400-px" disabled="true" rows="1"
                                         name="%{'children[' +( #status.count-1)+'].fullName'}"/>
                        </td>
                    </tr>
                    <tr>
                        <td><s:label value="%{getText('isDisable.label')}"/></td>
                        <td>
                            <s:radio
                                    list="#@java.util.HashMap@{'true':getText('yes.label'), 'false':getText('no.label')}"
                                    name="%{'children[' +( #status.count-1)+'].disable'}" disabled="true"/>
                        </td>
                    </tr>
                    <tr>
                        <td><s:label value="%{getText('gender.label')}"/></td>
                        <td>
                            <s:select list="#@java.util.HashMap@{'0':getText('male.label'),'1':getText('female.label')}"
                                      name="%{'children[' +( #status.count-1)+'].gender'}"
                                      cssClass="width-200-px" disabled="true"/>
                        </td>
                        <td><s:label value="%{getText('date_of_birth.label')}"/></td>
                        <td>
                            <s:textfield value="%{dateOfBirth}" disabled="true"
                                         name="%{'children[' +( #status.count-1)+'].dateOfBirth'}"
                                         cssClass="childDOB width-150-px" id="%{'dateOfBirth'+( #status.count-1)}"/>

                        </td>
                    </tr>
                </s:iterator>
            </s:if>
            <s:else>
                <s:iterator status="status" value="children">
                    <tr id="<s:property value="%{'row1' + (#status.count-1)}"/>">
                        <s:hidden name="%{'children[' +( #status.count-1)+'].id'}"/>
                        <td><s:label value="%{getText('name.label')}"/><span class="mandatory-field"></span></td>
                        <td colspan="3">
                            <s:textfield value="%{fullName}" cssClass="width-400-px" rows="1"
                                         name="%{'children[' +( #status.count-1)+'].fullName'}"/>
                            <s:submit type='button' onclick="deleteChild('%{(#status.count-1)}');return false;"
                                    value="Delete" />
                            <script type="text/javascript">
                                childIndex ++;
                            </script>
                        </td>
                    </tr>
                    <tr id="<s:property value="%{'row2' + (#status.count-1)}"/>">
                        <td><s:label value="%{getText('isDisable.label')}"/></td>
                        <td>
                            <s:radio
                                    list="#@java.util.HashMap@{'true':getText('yes.label'), 'false':getText('no.label')}"
                                    name="%{'children[' +( #status.count-1)+'].disable'}"/>
                        </td>
                    </tr>
                    <tr id="<s:property value="%{'row3' + (#status.count-1)}"/>">
                        <td><s:label value="%{getText('gender.label')}"/></td>
                         <td>
                            <s:select list="#@java.util.HashMap@{'0':getText('male.label'),'1':getText('female.label')}"
                                      name="%{'children[' +( #status.count-1)+'].gender'}"
                                      cssClass="width-200-px" disabled="%{isDisableMode()}"/>
                        </td>
                        <td><s:label value="%{getText('date_of_birth.label')}"/></td>
                        <td>
                            <s:textfield value="%{dateOfBirth}"
                                         name="%{'children[' +( #status.count-1)+'].dateOfBirth'}"
                                         cssClass="childDOB width-150-px" id="%{'dateOfBirth'+( #status.count-1)}"/>

                        </td>
                    </tr>
                </s:iterator>
            </s:else>
        </table>
    </td>
</tr>
<tr>
    <td colspan="4" class="right-align">
        <INPUT id="addChild" type="button" value="Add Child" onclick="addChildRow('childrenTable')"/>
    </td>
</tr>

<s:hidden id="child-name" value="%{getText('name.label')}"/>
<s:hidden id="child-dob" value="%{getText('date_of_birth.label')}"/>
<s:hidden id="is-disable" value="%{getText('isDisable.label')}"/>
<s:hidden id="yesId" value="%{getText('yes.label')}"/>
<s:hidden id="noId" value="%{getText('no.label')}"/>
<s:hidden id="delete" value="%{getText('delete.label')}"/>